<template>
    <mi-form-page @submit="submit"
                  title="运费模板编辑"
                  :loading="edit.loading"
                  v-model:show="edit.show"
    >
        <el-form :model="edit.info"
                 :rules="rules"
                 ref="formRef">

            <el-form-item label="模板名称" prop="title">
                <mi-input v-model="edit.info.title" type="text"></mi-input>
            </el-form-item>

            <el-form-item label="模板类型" prop="tpl_type">
                <mi-radio v-model="edit.info.tpl_type" :options="tplTypes" />
            </el-form-item>

            <el-form-item label="固定运费金额" prop="fixed_price" v-if="edit.info.tpl_type == 'fixed'">
                <mi-input-number v-model="edit.info.fixed_price" />
            </el-form-item>

            <template v-if="edit.info.tpl_type=='custom'">
                <el-form-item label="计费方式" prop="cost_type">
                    <mi-radio v-model="edit.info.cost_type" :options="[{id:1, title:'按件数'},{id:2, title:'按重量(kg)'},{id:3, title:'按体积'}]"></mi-radio>
                </el-form-item>

                <el-form-item label="默认运费">
                    <el-descriptions :column="4">
                        <el-descriptions-item label="首件">
                            <el-form-item prop="first_piece">
                                <mi-input-number v-model="edit.info.first_piece" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="首费">
                            <el-form-item prop="first_price">
                                <mi-input-number v-model="edit.info.first_price" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="续件">
                            <el-form-item prop="continue_piece">
                                <mi-input-number v-model="edit.info.continue_piece" />
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item label="续费">
                            <el-form-item prop="continue_price">
                                <mi-input-number v-model="edit.info.continue_price" />
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form-item>

                <el-form-item>
                    <template #label>
                        <span>
                           <el-tooltip content="设置指定区域的运费规则,优先级高于默认运费">
                              <el-icon><QuestionFilled /></el-icon>
                           </el-tooltip>
                           区域运费
                        </span>
                    </template>
                    <postage-tpl-regions ref="regionsRef" />
                </el-form-item>

                <el-form-item>
                    <template #label>
                        <span>
                           <el-tooltip content="设置包邮规则，优先级高于【区域运费】">
                              <el-icon><QuestionFilled /></el-icon>
                           </el-tooltip>
                           包邮条件
                        </span>
                    </template>
                    <postage-tpl-conditions ref="conditionsRef" />
                </el-form-item>

                <el-form-item>
                    <template #label>
                        <span>
                           <el-tooltip content="设置不支持配送的地区，优先级高于【包邮条件】">
                              <el-icon><QuestionFilled /></el-icon>
                           </el-tooltip>
                           不配送地区
                        </span>
                    </template>
                    <postage-tpl-regions-no />
                </el-form-item>
            </template>

        </el-form>
    </mi-form-page>
</template>

<script setup lang="ts">
import {reactive, watch, ref, onBeforeMount, inject} from "vue";
import {makeModelAuth} from "@/utils/auth";
import List from "@/model/list";
import Edit from "@/model/edit";
import {FormInstance} from "element-plus";
import {simpleGet, simplePost} from "@/utils/request";
import {useAdminStore} from "@/store/admin";
import PostageTplRegions from "@/views/delivery/components/PostageTplRegions.vue";
import {msgError} from "@/utils/alert";
import PostageTplConditions from "@/views/delivery/components/PostageTplConditions.vue";
import PostageTplRegionsNo from "@/views/delivery/components/PostageTplRegionsNo.vue";
import delivery from "@/service/delivery";

const formRef = ref<FormInstance>()
const auth = makeModelAuth("delivery.postageTemplate")
const tplTypes = delivery.postageTplTypes   // 运费模板类型
const rules = {
    title:[{required:true, message:'模板标题必填'}],
    tpl_type:[{required:true, message:'模板类型必填'}],
    fixed_price:[
        {
            validator:(rule:any, value:any, callback:any) => {
                if (edit.info.tpl_type=='fixed' && (!value || value==0)){
                    callback(new Error('请填写固定运费金额'))
                }
                callback()
            }
        }
    ],
}
const adminStore = useAdminStore()
const list = inject<List>("list")
const edit = inject<Edit>("edit", new Edit({}))

const regionsRef = ref() as any
const conditionsRef = ref() as any

const submit = async () => {

    if (edit.info.tpl_type == 'custom'){

        const validateRes = await regionsRef.value?.validate()
        if (!validateRes){
            msgError("请完善区域运费规则")
            return;
        }

        const conditionValidate = await conditionsRef.value?.validate()
        if (!conditionValidate){
            msgError("请完善包邮条件规则")
            return;
        }
    }

    let url = '/' + (edit.info.id ? auth.edit : auth.add)
    await edit.submit({
        formRef: formRef.value,
        url: url,
        list: list
    })
}

watch(() => edit.show, (nv,ov) => {
    if (!nv){
        return;
    }
    edit.init(async () => {
        const id = edit.info.id
        if (id){
            // 请求表单数据
            let res = await simpleGet('/' + auth.edit, {id:id})
            edit.info = res.info
        }else{
            edit.info = {
                tpl_type:'custom',
                regions:[],
                conditions:[],
                regionsNo:null,
                status:1,
            }
        }
    })
})

</script>

<style scoped>

</style>
